/**
 * Created by user on 2/13/19.
 */
import React from 'react'
import { connect } from 'react-redux'

import { DoLikeAction, ToastAction } from '@act'
import { Type, EventCenter } from '@utils/Global'

class doLike extends React.Component {
  toastTimer = null
  clickIcon = () => {
    const { lastLikeTime, dispatch, innerType } = this.props
    const { toggleAnimate, setLastLikeTime, toggleToastText } = DoLikeAction
    const { showToast } = ToastAction
    let now = Date.now()
    if (now - lastLikeTime < 5 * 1000) {
      if (innerType === 'dm') {
        dispatch(showToast(`技能冷却中, ${5 - parseInt((now - lastLikeTime) / 1000)}秒后再去支持讲师吧`, 1.5 * 1000))
      }
      if (innerType === 'swiper') {
        this.toastTimer && clearTimeout(this.toastTimer)
        this.toastTimer = setTimeout(() => {
          dispatch(toggleToastText(''))
        }, 1.5 * 1000)
        dispatch(toggleToastText(`技能冷却中, ${5 - parseInt((now - lastLikeTime) / 1000)}秒后再去支持讲师吧`, 1.5 * 1000))
      }
      return
    }
    dispatch(toggleAnimate(true))
    dispatch(setLastLikeTime(Date.now()))
    setTimeout(() => {
      dispatch(toggleAnimate(false))
    }, 2 * 1000)
    let msg = {
      type: Type.COMMON_TYPE.COMMON_STAR_LIVE,
      data: {}
    }
    EventCenter.emit('send_msg_to_socket', msg)
  }
  renderAnimateView() {
    const { showAnimate } = this.props
    return [1, 2, 3].map(r => {
      return (
        <div key={r} className={`heart-outer ${showAnimate ? `animate${r}` : ''}`}>
          <div className={`heart-inner color${r}`}></div>
        </div>
      )
    })
  }
  render() {

    return (
      <div className="do_like_con">
        <img onClick={this.clickIcon} className="out_dm_other_zan_icon" src={require('@images/question/live_zan_icon.png')} alt=""/>

        <div className="star_animate_view">
          { this.renderAnimateView() }
        </div>
      </div>
    )
  }
}
const mapStateTopProps = (state) => {
  return {
    showAnimate: state.DoLikeState.showAnimate,
    lastLikeTime: state.DoLikeState.lastLikeTime,
    showDm: state.DmState.show
  }
}
export default connect(mapStateTopProps)(doLike)
